<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>tail log</title>
    <script th:src="@{/js/sockjs.min.js}"></script>
    <script th:src="@{/js/stomp.min.js}"></script>
    <script th:src="@{/js/jquery.js}"></script>
</head>
<body>
<div>
    <button id="connect" onclick="connect()">connect</button>
    <button id="disconnect" onclick="disconnect()" disabled="disabled">disconnect</button>
    <button id="send" onclick="send()" disabled="disabled">send</button>
</div>
<div id="log-container">
  <textarea id="logText"></textarea>
</div>
<script type="text/javascript">
    var ws = null;
    function setConnected(connected) {
        document.getElementById('connect').disabled = connected;
        document.getElementById('disconnect').disabled = !connected;
        document.getElementById('send').disabled = !connected;
    }
    function connect() {
        ws = new SockJS("/log");
        ws.onopen = function () {
            setConnected(true);
        };
        ws.onmessage = function (event) {
            // 接收服务端的实时日志并添加到HTML页面中
            $("#log-container").find("textarea").append(event.data);
            // 滚动条滚动到最低部
            $("#log-container").scrollTop($("#log-container").find("div").height() - $("#log-container").height());
        };
        ws.onclose = function () {
            alert('Info: WebSocket connection closed.');
            setConnected(false);
        };
    }
    function disconnect() {
        if (ws != null) {
            ws.close();
            ws = null;
        }
    }
    function send() {
        if (ws != null) {
            ws.send("/var/log/secure");
        } else {
            alert('WebSocket connection not established, please connect.');
        }
    }

</script>
</body>
</html>